<template>
<!--  <div style='margin: 0 auto;' class="sign-up">
    <div style="height:50px;"></div>
    <div class="logo-box">
      <img
          width="150"
          alt="啦啦健身注册"
          :src="logo"
          @click="router.push('/')"
      />
      <div>注册</div>
    </div>
    <div class="login-container">
      &lt;!&ndash; 注册 &ndash;&gt;
      <el-form
          ref="ruleFormRef"
          :model="formRegist"
          :rules="ruleInline"
          style="width:500px;"
      >
        <el-form-item prop="username">
          <el-input
              type="text"
              v-model="formRegist.username"
              clearable
              placeholder="用户名"
          >
            <Icon type="md-person" slot="prepend"></Icon>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              type="password"
              v-model="formRegist.password"
              clearable
              placeholder="请输入大于6位的密码"
          >
            <Icon type="md-lock" slot="prepend"> </Icon>
          </el-input>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input
              type="text"
              v-model="formRegist.mobile"
              clearable
              placeholder="请输入手机号"
          >
            <Icon type="md-phone-portrait" slot="prepend"></Icon>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
              type="text"
              v-model="formRegist.code"
              clearable
              placeholder="请输入验证码"
          >
            <template #append>
              <el-button @click="sendCode" :icon='Search'>发送验证码</el-button>
            </template>
          </el-input>
        </el-form-item>
        &lt;!&ndash;        <el-form-item>&ndash;&gt;
        &lt;!&ndash;          <el-button @click="verifyBtnClick" long :type="verifyStatus?'success':'primary'">&ndash;&gt;
        &lt;!&ndash;            {{verifyStatus?'验证通过':'点击完成安全验证'}}&ndash;&gt;
        &lt;!&ndash;          </el-button>&ndash;&gt;
        &lt;!&ndash;        </el-form-item>&ndash;&gt;

        <el-form-item>
          <el-button type="error" size="large" @click="handleRegist(ruleFormRef)" long
          >注册</el-button
          >
        </el-form-item>
      </el-form>

      &lt;!&ndash;      &lt;!&ndash; 拼图验证码 &ndash;&gt;&ndash;&gt;
      &lt;!&ndash;      <Verify&ndash;&gt;
      &lt;!&ndash;        ref="verify"&ndash;&gt;
      &lt;!&ndash;        class="verify-con"&ndash;&gt;
      &lt;!&ndash;        :verifyType="verifyType"&ndash;&gt;
      &lt;!&ndash;        @change="verifyChange"&ndash;&gt;
      &lt;!&ndash;      ></Verify>&ndash;&gt;
      <div class="login-btn">已有账号？<a @click="router.push('login')">直接登录</a></div>
    </div>
  </div>
  <Verify
      @success='doSignUp'
      :mode="'pop'"
      :captchaType="'blockPuzzle'"
      :imgSize="{ width: '330px', height: '155px' }"
      ref='verify'
  ></Verify>-->

  <div class="login">
    <div class='form-container'>
      <el-form
          class='login-form'
          ref='ruleFormRef'
          style='max-width: 800px;'
          :model='formRegist'
          :rules='ruleInline'
          label-width='auto'
          status-icon
      >
        <div class='login-logo'>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="点我返回首页"
              placement="top-start"
          >
          <img :src="logo" alt="注册" @click="router.push('/')" style="cursor: pointer">
          </el-tooltip>
        </div>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='username' size="small">
            <el-input
                type='text'
                v-model='formRegist.username'
                style='width: 300px'
                size="default"
                placeholder='请输入用户名'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='realName' size="small">
            <el-input
                v-model='formRegist.realName'
                style='width: 300px'
                size="default"
                placeholder='请输入真实姓名'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='password' size="small">
            <el-input
                type='password'
                v-model='formRegist.password'
                style='width: 300px'
                size="default"
                placeholder='请输入长度大于6位的密码'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='mobile' size="small">
            <el-input
                v-model='formRegist.mobile'
                style='width: 300px'
                size="default"
                placeholder='请输入手机号'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='age' size="small">
            <el-input
                type='number'
                v-model='formRegist.age'
                style='width: 300px'
                size="default"
                placeholder='请输入年龄'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='height' size="small">
            <el-input
                type='number'
                v-model='formRegist.height'
                style='width: 300px'
                size="default"
                placeholder='请输入身高（cm）'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='weight' size="small">
            <el-input
                type='number'
                v-model='formRegist.weight'
                style='width: 300px'
                size="default"
                placeholder='请输入体重（kg）'
            />
          </el-form-item>
        </el-row>
        <el-row style='margin: 5px; display: flex; justify-content: center'>
          <el-form-item prop='gender' size="small">
            <el-radio-group v-model="formRegist.gender">
              <el-radio label="男" value="F" size="default"/>
              <el-radio label="女" value="M" size="default"/>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row style='margin-top: 5px; display: flex; justify-content: center'>
          <el-form-item style='text-align: center'>
            <el-button
                style='text-align: center; width: 300px'
                type='primary'
                size='large'
                @click='handleRegist(ruleFormRef)'
            >注册
            </el-button>
          </el-form-item>
        </el-row>
        <el-row>
          <div class="register">
            <a class="container" href="/login">已有账号，返回<i style="color: red">登录</i></a>
            <!--            <el-divider direction="vertical" border-style="dashed" />-->
            <!--            <div style='cursor: pointer' @click="router.push('forgetPassword')">忘记密码</div>-->
          </div>
        </el-row>
      </el-form>
    </div>

    <Verify
        @success='doSignUp'
        :mode="'pop'"
        :captchaType="'blockPuzzle'"
        :imgSize="{ width: '330px', height: '155px' }"
        ref='verify'
    ></Verify>
  </div>


</template>

<script setup lang='ts'>
import * as apiLogin from '@/api/login.ts';
import { sendSms } from '@/api/common.ts';
import Verify from '@/components/verifition/Verify.vue'
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {Microphone, Plus, Iphone, Search} from '@element-plus/icons'
import { useRoute,useRouter } from 'vue-router'
import logoImg from '@/assets/logo.png'
import i18n from '@/lang'

// config:require('@/config');
const year = new Date().getFullYear();
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
// 注册表单
const formRegist = ref({
  mobile: '',
  code: '',
  username: '',
  password: '',
  realName: '',
  age: undefined,
  gender: 'F',
  height: undefined,
  weight: undefined,
  captchaVO: {},
});
const logo = ref(logoImg)
const ruleInline = reactive({
  // 验证规则
  username: [{ required: true, message: i18n.global.t('login.userNamePlaceHolder') }],
  password: [
    { required: true, message: i18n.global.t('login.passwordPlaceHolder') },
    { type: 'string', min: 6, message: i18n.global.t('registry.passwordCount') }
  ],
  realName: [{ required: true, message: '请输入姓名' }],
  age: [{ required: true, message: '请输入年龄' }, {pattern : /\d+/,trigger: 'blur',message: '请输入正确的年龄'}],
  mobile: [
    { required: true, message: i18n.global.t('registry.inputMobile') },
    {
      pattern: /^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/,
      trigger: 'blur',
      message: i18n.global.t('registry.illegalMobile')
    }
  ],
  height: [{ required: true, message: '请输入身高' }],
  weight: [{ required: true, message: '请输入体重' }],
  // code: [{ required: true, message: i18n.global.t('registry.inputCaptcha') }]
});
const verifyStatus = ref(false); // 是否验证通过
const verifyType = ref('REGISTER'); // 验证状态
const codeMsg = ref(i18n.global.t('registry.sendCaptcha')) // 提示文字
const interval = ref(''); // 定时器
const time = ref(60);
const verify = ref({ });


// 打开图片验证码
function verifyBtnClick () {
  if (!verifyStatus.value) {
    verify.value.show();
  }
}
function handleRegist(formEl: FormInstance) {
  formEl.validate((valid:boolean) => {
    if (valid) {
      verify.value.show();
    } else {}
  });
}
// 发送短信验证码
function sendCode () {
  if (time.value === 60) {
    if (formRegist.value.mobile === '') {
      ElMessage.warning(i18n.global.t('registry.inputMobileFirst'));
      return;
    }
    let params = {
      mobile: formRegist.value.mobile,
      verificationEnums: 'REGISTER'
    };
    sendSms(params).then(res => {
      if (res.code === '00000') {
        ElMessage.success(i18n.global.t('registry.captchaSendSuccess'));
        formRegist.code = res.data;
        interval.value = setInterval(() => {
          time.value--;
          if (time.value === 0) {
            time.value = 60;
            codeMsg.value = i18n.global.t('registry.resent');
            verifyStatus.value = false;
            clearInterval(interval.value);
          } else {
            codeMsg.value = time.value;
          }
        }, 1000);
      } else {
        ElMessage.warning(res.msg);
      }
    });
  }
}

let isSubmit = false;
function doSignUp(verifyResult: any) {
  if(isSubmit){
    return ;
  }

  formRegist.value.captchaVO = verifyResult
  apiLogin.regist(formRegist.value).then((res) => {
    if (res.code === '00000') {
      ElMessage.success('注册成功');
      isSubmit = false;
      router.push('login');
    } else {
      ElMessage.warning(res.msg);
    }
  });
}

onMounted (()=>{
  // ruleFormRef.value.resetFields();
  // document.querySelector('.sign-up').style.height = window.innerHeight + 'px'
})
</script>
<style scoped>
/*.logo-box {
  width: 800px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  img {
    width: 150px;
    cursor: pointer;
  }
  div {
    font-size: 20px;
    margin-top: 10px;
  }
}

.login-container {
  border-top: 2px solid #cccccc;
  position: relative;
  margin: 0 auto;
  width: 800px;
  background-color: #fff;
  padding: 20px 150px;
  .login-btn{
    position: absolute;
    right: 20px;
    top: -45px;
  }
}

.verify-con{
  position: absolute;
  left: 140px;
  top: 80px;
  z-index: 10;
}

.other-login {
  margin: 0 auto;
  .ivu-icon {
    font-size: 24px;
  }
}
.regist {
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;
  span {
    margin-left: 10px;
    &:hover {
      cursor: pointer;
      color: #cccccc;
    }
  }
}
.foot {
  position: fixed;
  bottom: 4vh;
  width: 368px;
  left: calc(50% - 184px);
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  .help {
    margin: 0 auto;
    margin-bottom: 1vh;
    width: 80%;
    .item {
      color: rgba(0, 0, 0, 0.45);
    }
    :hover {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}*/

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  background: url("@/assets/banner.jpeg") center center no-repeat;
  background-size: 100% 100%;
}

.login-logo {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 5px 0;
}

.login-welcome{
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  line-height: 80px;
}
/*.form-container{
  height: 800px;
}*/
.login-form {
  /* min-height: 50vh; */
  /* display: flex; */
  /* align-items: member; */
  width: 500px;
  /*height: 30vh;*/
  text-align: center;
  margin: 0 auto;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
  rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
  rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
.register{
  display: flex;
  text-align: center;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
  padding-right: 50px;
  padding-bottom: 20px;
}
.register .container{
  height: 1em;
  line-height: 1em;
  cursor: pointer;
  color: #878282;
}
.register .container:hover{
  background-color: #FFFFFF;
}
</style>
